<template>
    <div>
        <div class="pub-table-action-btn">
            <a-button v-if="!disabled" type="primary" icon="plus" @click="add">添加行</a-button>
        </div>
        <a-table
            :pagination="false"
            :columns="columns"
            :data-source="pageTableData">
            <span slot="index" slot-scope="text, record, index">{{ index + 1 }}</span>
            <template
                v-for="col in ['mainName','level','domain']"
                :slot="col"
                slot-scope="text, record, index">
                <template v-if="index === editingIndex">
                    <a-select v-if="col === 'level'"
                              style="width: 100%;"
                              v-model="record['level']">
                        <a-select-option value="国家级">国家级</a-select-option>
                        <a-select-option value="省部级">省部级</a-select-option>
                        <a-select-option value="地市级">地市级</a-select-option>
                        <a-select-option value="局级">局级</a-select-option>
                        <a-select-option value="公司级">公司级</a-select-option>
                    </a-select>
                    <b-input v-else v-model="record[col]"></b-input>
                </template>
                <template v-else>
                    {{ text }}
                </template>
            </template>
            <template slot="operation" slot-scope="text, record, index">
                <div class="pub-table-list-action" v-if="!disabled">
                    <template v-if="index === editingIndex">
                        <span @click="save(index)">保存</span>
                        <span @click="cancel(index)">取消</span>
                    </template>
                    <template v-if="editingIndex === null">
                        <span @click="edit(index)">编辑</span>
                        <span @click="del(record)">删除
                        </span>
                    </template>
                </div>
            </template>
        </a-table>
        <pagination
            :total="tableData.length"
            v-model="pageNo"
            :pageSize.sync="pageSize"
            @change="handlePageChange"
            @showSizeChange="showSizeChange"
        ></pagination>
    </div>
</template>

<script>
export default {
    name: 'mainResult',
    props: {
        list: {
            type: Array,
            default: () => {
                return []
            }
        },
        disabled: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            pageNo: 1,
            pageSize: 10,
            cacheRow: null,
            columns: [
                {
                    title: '序号',
                    dataIndex: 'index',
                    width: 70,
                    scopedSlots: { customRender: 'index' }
                },
                {
                    title: '成果名称',
                    dataIndex: 'mainName',
                    scopedSlots: { customRender: 'mainName' }
                },
                {
                    title: '级别',
                    dataIndex: 'level',
                    scopedSlots: { customRender: 'level' }
                }, {
                    title: '领域',
                    dataIndex: 'domain',
                    scopedSlots: { customRender: 'domain' }
                }, {
                    title: '操作',
                    dataIndex: 'operation',
                    scopedSlots: { customRender: 'operation' }
                }
            ],
            editingIndex: null,
            tableData: [],
            cacheTable: []
        }
    },
    computed: {
        pageTableData() {
            return this.tableData.slice((this.pageNo - 1) * this.pageSize, this.pageNo * this.pageSize)
        }
    },
    watch: {
        list() {
            this.tableData = this.$clone(this.list)
        }
    },
    mounted() {
        this.tableData = this.$clone(this.list)
    },
    methods: {
        handlePageChange(pageNo, pageSize) {
            this.pageNo = pageNo
        },
        showSizeChange(pageNo, pageSize) {
            this.pageNo = 1
            this.pageSize = pageSize
        },
        del(item) {
            this.$confirm({
                title: '确认删除该数据？',
                onOk: () => {
                    let resIndex = this.tableData.findIndex(v => v.id === item.id)
                    if (resIndex !== -1) {
                        this.tableData.splice(resIndex, 1)
                    }
                    this.$emit('update:list', this.tableData)
                    if (this.tableData.length && this.tableData.length <= (this.pageNo * this.pageSize - this.pageSize)) {
                        this.pageNo = this.pageNo - 1
                    }
                }
            })
        },
        add() {
            if (this.editingIndex !== null) return this.$noticeWarning('请结束当前行再添加')
            this.tableData.unshift({
                id: Date.now(),
                mainName: '',
                level: '',
                domain: ''
            })
            this.editingIndex = 0
        },
        edit(index) {
            this.editingIndex = index
            this.cacheTable = this.$clone(this.tableData)
        },
        save(index) {
            if (!this.tableData[index].mainName) return this.$noticeWarning('请输入成果名称')
            if (!this.tableData[index].level) return this.$noticeWarning('请选择级别')
            if (!this.tableData[index].domain) return this.$noticeWarning('请输入领域')

            this.$emit('update:list', this.tableData)
            this.editingIndex = null
        },
        cancel(index) {
            this.tableData = this.$clone(this.cacheTable)
            this.$emit('update:list', this.cacheTable)
            this.editingIndex = null
        }
    }
}
</script>

<style scoped>

</style>
